// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

// useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）, 比 如发送AJAX请求，更改DOM等等

import { useEffect, useState } from "react";


const URL = 'http://geek.itheima.net/v1_0/channels'

function App17() {
  // 创建一个状态数据
  const [list, setList] = useState([])
  // useEffect是渲染完成就调用的钩子
  // 第二个参数为空数组时，副作用函数（第一个参数）只会执行一次
  // 第二个参数的不同会影响副作用函数执行时机
  // 没有依赖项时， 组件初始渲染+组件更新时执行
  // 空数组依赖项，只在初始渲染时执行一次
  // 添加特定依赖项，组件初始渲染+特定依赖项变化时执行
  useEffect(() => {
    // 额外的操作，获取频道列表
    async function getList() {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      console.log(jsonRes)
      setList(jsonRes.data.channels)
    }
    // 调用方法请求数据
    getList()
  }, [])
  return (
    <div className="App">
      this is App 
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default App17
